<!DOCTYPE html>
<html>
<?php include '../public/header.php' ?>
<body class="laytp-container">
    <div id="opt_nav">
        <ul class="layui-nav">
            <li class="layui-nav-item">

            </li>
            <li class="layui-nav-item menu" key="0">
                <div><a>全部</a></div>
            </li>
            <li class="layui-nav-item menu" key="1">
                <div><a>产品</a></div>
            </li>
            <li class="layui-nav-item menu" key="2">
                <div><a>其他</a></div>
            </li>
            <li class="layui-nav-item menu" id="open_page">
                <div><a class="bottom-line">新页面</a></div>
            </li>

            <div id="opt_nav_div">
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-primary" id="add">
                        <i class="layui-icon layui-icon-add-1"></i>新增
                    </button>
                </li>
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-primary" id="opt_menu">
                        <i class="layui-icon layui-icon-triangle-d"></i>操作
                    </button>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="del">删除</a></dd>
                        <dd><a href="javascript:;" id="recycle">回收站</a></dd>
                        <dd><a href="">导入</a></dd>
                        <dd><a href="">导出</a></dd>
                    </dl>
                </li>
                <!--刷新-->
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-primar" id="refresh_table" title="刷新">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                    </button>
                </li>
                <!--筛选-->
                <li class="layui-nav-item layui-form">
                    <button class="layui-btn layui-btn-primary" id="cols_table" title="筛选列">
                        <i class="layui-icon layui-icon-cols"></i>
                    </button>
                </li>
                <!--查询-->
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-primary" id="search_table" title="查询">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </li>
            </div>
        </ul>
    </div>


    <div class="layui-card" id="search-form">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md3">
                            <label class="layui-form-label">搜索</label>
                            <div class="layui-input-block">
                                <input type="text" name="keyword" placeholder="项目名称  \ 供应商 \ 物资名称及规格 \ 计量单位 \ 备注" id="keyword" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <label class="layui-form-label">所属单位/部门</label>
                            <div class="layui-input-block">
                                <select name="dept" class="layui-input dept">
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item search-div">
                    <div class="layui-form-item layui-inline" style="width: 100%;text-align: center;">
                        <button class="laytp-btn laytp-btn-md laytp-btn-primary" id="search-ok" type="button">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-primary" id="search-close" type="reset" >
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-card" id="table-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md12" id="table_list">
                    <div class="layui-card-body">
                        <table id="datalist" lay-filter="datalist"></table>
                    </div>
                    <div id="table_list_page">
                        <div class="layui-form">
                            <input type="checkbox" id="layTableAllChoose" name="layTableAllChoose" title="全选" lay-skin="primary" lay-filter="layTableAllChoose">
                            <div id="table-bottom">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">其他</button>
                                <button class="layui-btn layui-btn-sm layui-btn-primary" id="demo1">
                                    下拉菜单<i class="layui-icon layui-icon-down layui-font-12"></i>
                                </button>
                            </div>
                        </div>
                        <div class="table-count"><p>本页合同总金额：￥4,500</p></div>
                        <div id="laytp-page"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="test-dropdown-toolbar-barDemo">
        <a href="javascript:;" class="bar_opt" lay-event="search">查看</a>
        <a href="javascript:;" class="bar_opt" lay-event="edit">编辑</a>
        <a href="javascript:;" class="bar_opt" lay-event="del">删除</a>
        <a href="javascript:;" class="bar_opt" lay-event="more">更多<i class="layui-icon layui-icon-triangle-d"></i></a>
    </script>
    <script src='/static/admin/js/tableList.js'></script>
    <script>
        // 列表选中id字符集
        var tableCheck = [];
        layui.use(["laytp",'laypage','table','dropdown','form'], function () {
            var laypage = layui.laypage;
            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;

            //表格渲染
            table.render({
                elem: "#datalist"
                , id: "datalist"
                , url: facade.url("stuff/list_stuff_shou")
                , toolbar: true
                , defaultToolbar: ['filter', 'print', 'exports']
                , where: {token: token}
                , method: "POST"
                , cellMinWidth: 80
                , height: 'full-140'
                , request: {pageName: 'page',limitName: 'pagesize'}
                , loading: true
                , response: {statusCode: 2000}
                , parseData: function (res) {
                    // 所属单位
                    var dept = res.data.dept;
                    var dept_str = '';
                    for (var i=0;i<dept.length;i++){
                        if(res.data.is_dept == dept[i].id){
                            dept_str += '<option value="'+dept[i].id+'" selected>'+dept[i].name+'</option>';
                        }else {
                            dept_str += '<option value="'+dept[i].id+'">'+dept[i].name+'</option>';
                        }
                    }
                    $('.dept').html(dept_str);
                    render_from();

                    laypage.render({
                        elem: 'laytp-page'
                        ,count: res.data.data.total
                        ,curr: res.data.data.current_page
                        ,groups: 3
                        ,layout: ['count', 'page', 'limit', 'skip']
                        ,jump: function(obj, first){
                            //首次不执行
                            if(!first){
                                // 获取查询条件
                                layui.table.reload('datalist', {
                                    where: {
                                        page: obj.curr,
                                        pagesize: obj.limit,
                                        token: token
                                    },
                                });
                            }
                        }
                    });
                    return {
                        "code": res.code,
                        "msg": res.message,
                        "count": res.data.data.total,
                        "data": res.data.data.data
                    };
                }
                , cols: [[
                    {type: "checkbox", fixed: 'left'}
                    ,{type:'numbers',title:'序号',fixed:'left'}
                    ,{field:'number',title:'采购单号',minWidth:120}
                    ,{field:'engin_name',title:'项目名称',minWidth:120,event:"engin_name",templet: function (e) {
                            return '<a class="colorlan">'+e.engin_name+'</a>';
                        }}
                    ,{field:'supplier',title:'供应商',minWidth:120}
                    ,{field:'dai_num',title:'待收货数量',minWidth:120}
                    ,{field:'shou_num',title:'已收货数量',minWidth:120}
                    ,{field:'shou_num',title:'已收货金额(元)',minWidth:120,templet: function (e) {
                            return (parseFloat(e.shou_num) * parseFloat(e.price)).toFixed(2);
                        }}
                    ,{field:'name',title:'物资名称及规格',minWidth:120}
                    ,{field:'unit',title:'计量单位',minWidth:120}
                    ,{field:'num',title:'采购数量',minWidth:120}
                    ,{field:'price',title:'采购单价(元)',minWidth:120}
                    ,{field:'money',title:'采购金额(元)',minWidth:120}
                    ,{fixed: 'right', title:'操作', toolbar: '#test-dropdown-toolbar-barDemo', width:160}
                ]]
            });


            // 全选
            form.on('checkbox(layTableAllChoose)', function(data){
                if(data.elem.checked === true){
                    $('.layui-table').find('.layui-form-checkbox[lay-skin=primary]').each(function () {
                        $(this).addClass('layui-form-checked');
                    });
                    $('#table-bottom').show();
                }else{
                    $('.layui-table').find('.layui-form-checkbox[lay-skin=primary]').each(function () {
                        $(this).removeClass('layui-form-checked');
                    });
                    $('#table-bottom').hide();
                }
            });

            // 底部操作信息
            dropdown.render({
                elem: '#demo1'
                , data: [{
                    title: '菜单1'
                    , id: 100
                    , href: '#'
                },{
                    title: '菜单2'
                    , id: 100
                    , href: '#'
                }]
            });

            //监听选中行事件
            table.on('checkbox(datalist)', function(obj){
                var checkStatus = layui.table.checkStatus('datalist');
                // 全选处理
                if(checkStatus.isAll === true){
                    $('#layTableAllChoose').next('.layui-form-checkbox[lay-skin=primary]').addClass('layui-form-checked');
                }else{
                    $('#layTableAllChoose').next('.layui-form-checkbox[lay-skin=primary]').removeClass('layui-form-checked');
                }
                // 获取选中的id字符集
                if (checkStatus.data.length > 0) {
                    for(let i=0;i<checkStatus.data.length;i++){
                        tableCheck.push(checkStatus.data[i].id);
                    }
                    $('#table-bottom').show();
                }else{
                    tableCheck = [];
                    $('#table-bottom').hide();
                }
            });

            //监听数据表格顶部左侧按钮点击事件
            table.on("toolbar(datalist)", function (obj) {
                // //默认按钮点击事件，包括添加按钮和回收站按钮
                // var defaultTableToolbar = layui.context.get("defaultTableToolbar");
                // if (defaultTableToolbar.indexOf(obj.event) !== -1) {
                //     laytp.tableToolbar(obj);
                // } else {
                // }
            });

            //监听数据表格[操作列]按钮点击事件
            table.on("tool(datalist)", function (obj) {
                var that = this
                switch (obj.event) {
                    case 'edit':
                        openPage('edit.php?id='+obj.data.id);
                        break;
                    case 'del':
                        var index = layer.confirm('确定删除数据？', {
                            btn: ['确定','取消']
                        }, function(){
                            // facade.ajax({route: '/admin.user/login', data: {id: obj.data.id}}).done(function(res){
                            // });
                            layer.close(index);
                        }, function(){
                        });
                        break;
                    case 'more':
                        //更多下拉菜单
                        dropdown.render({
                            elem: that
                            ,show: true //外部事件触发即显示
                            ,data: [
                                {title: '查看无tab',id: 'search'},
                                {title: '查看有tab',id: 'search_tab'},
                                {title: '查看流程',id: 'search_flow'},
                                {title: '删除',id: 'del'}
                            ]
                            ,click: function(data, othis){
                                //根据 id 做出不同操作
                                if(data.id === 'search'){
                                    openPage('show.php?id='+obj.data.id);
                                } else if(data.id === 'search_tab'){
                                    openPage('show_tab.php?id='+obj.data.id);
                                } else if(data.id === 'search_flow'){
                                    openPage('show_flow.php?id='+obj.data.id);
                                } else if(data.id === 'del'){
                                    var index = layer.confirm('确定删除数据？', {
                                        btn: ['确定','取消']
                                    }, function(){
                                        layer.close(index);
                                    }, function(){
                                    });
                                }
                            }
                            ,align: 'right'
                            ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);'
                        });
                        break;
                }
            });

            //监听表头排序事件
            table.on('sort(datalist)', function(obj){
                layui.table.reload('datalist', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: {
                        "order_param" : {
                            "field" : obj.field,
                            "type" : obj.type
                        }
                    }
                });
            });

            // 打开新页面与返回查询
            $('.menu').click(function () {
                $('.menu').each(function () {
                    $(this).find('a').removeClass('bottom-line');
                });

                if($(this).attr('key') == undefined){
                }else{
                    var key = $(this).attr('key');
                    var er_menu_id = sessionStorage.getItem('active_er_menu');
                    var menu_id = sessionStorage.getItem('active_er_menu'+er_menu_id)
                    parent.openNewPage({id: menu_id}, key);
                }
            });

            //查询类容
            $('#search-ok').click(function () {
                var keyword = $('#keyword').val();
                var dept = $('.dept').val();
                table.reload('datalist', {
                    where: {
                        token: token,
                        keyword:keyword,
                        dept:dept
                    }
                });
            });
        });

        // 新增
        $('#add').click(function () {
            openPage('add.php');
        });
        // 批量删除
        $('#del').click(function () {
            if(tableCheck.length == ''){
                layer.msg('请选择要删除的数据'); return false
            }
            facade.ajax({route: '/admin.user/login', data: {id: tableCheck}}).done(function(res){
            });
        });
        // 回收站
        $('#recycle').click(function () {
            openPage('/contract_stuff/add.php');
        });
    </script>
</body>
</html>
